<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/bootstrap.css">
  <script src="../js/jquery.min.js"></script>
  <script src="../js/popper.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../font/iconfont.css">
  <link rel="stylesheet" href="../css/banner.css">
  <title>Document</title>
  <style></style>
</head>

<body>
  <!-- 首页头部部分1 -->
 <header class="mz-index-header" id="header">
    <div class="container d-flex justify-content-between align-items-center mz-topbar">
      <h1 class="mz-logo">
        <a href="#" class="d-block">
          <svg id="logo" width="108px" fill="#fff" height="21px" viewbox="0 0 108 21" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g id="页面-1" stroke="none" stroke-width="1" fill-rule="evenodd">
              <g id="编组" transform="translate(0.999800, 0.999800)">
                <polygon id="Fill-1" points="53.3530588 20 56.6877647 20 56.6877647 0 53.3530588 0"></polygon>
                <path d="M103.371647,0.000176470588 L103.371647,15.0003235 C103.371647,15.9199718 102.625176,16.6667451 101.704588,16.6667451 L98.3698824,16.6667451 L96.7022353,16.6667451 L91.7004706,16.6667451 C90.7798824,16.6667451 90.0334118,15.9199718 90.0334118,15.0003235 L90.0334118,0.000176470588 L86.6987059,0.000176470588 L86.6987059,15.8335343 C86.6987059,18.1344193 88.5651765,20.0001765 90.8669412,20.0001765 L96.7022353,20.0001765 L98.3698824,20.0001765 L102.538118,20.0001765 C104.839882,20.0001765 106.706353,18.1344193 106.706353,15.8335343 L106.706353,0.000176470588 L103.371647,0.000176470588 Z" id="Fill-2"></path>
                <path d="M22.5082353,0.000176470588 L15.0052941,0.000176470588 L11.6711765,0.000176470588 L4.16823529,0.000176470588 C1.86588235,0.000176470588 -2.71678105e-14,1.865236 -2.71678105e-14,4.16657365 L-2.71678105e-14,19.9990005 L3.33470588,19.9990005 L3.33470588,4.99973549 C3.33470588,4.07896524 4.08117647,3.33282383 5.00176471,3.33282383 L11.6711765,3.33282383 L11.6711765,20.0001765 L15.0052941,20.0001765 L15.0052941,3.33282383 L21.6747059,3.33282383 C22.5952941,3.33282383 23.3423529,4.07896524 23.3423529,4.99973549 L23.3423529,19.9990005 L26.6764706,19.9990005 L26.6764706,4.16657365 C26.6764706,1.865236 24.8105882,0.000176470588 22.5082353,0.000176470588" id="Fill-4"></path>
                <path d="M31.6787647,4.16717644 L31.6787647,4.16717644 L31.6787647,15.8336471 C31.6787647,18.1345997 33.5446471,20.0004118 35.847,20.0004118 L48.3517059,20.0004118 L48.3517059,16.6668824 L36.6805294,16.6668824 C35.7593529,16.6668824 35.0128824,15.9212632 35.0128824,15.0004118 L35.0128824,13.3333531 L35.0128824,11.6674704 L48.3517059,11.6674704 L48.3517059,8.33394111 L35.0128824,8.33394111 L35.0128824,5.00041176 C35.0128824,4.0795603 35.7593529,3.33335308 36.6805294,3.33335308 L48.3517059,3.33335308 L48.3517059,0.000411764706 L35.847,0.000411764706 C33.5446471,0.000411764706 31.6787647,1.8656358 31.6787647,4.16717644" id="Fill-6"></path>
                <path d="M81.6971176,2.50017657 C81.6971176,1.11948741 80.5771176,0.000470588235 79.1959412,0.000470588235 L61.6894706,0.000470588235 L61.6894706,3.3334119 L76.7135882,3.3334119 L62.523,15.6367166 L62.5253529,15.6384807 C62.0135882,16.0965543 61.6894706,16.7598496 61.6894706,17.5001766 C61.6894706,18.8814538 62.8094706,20.0004706 64.1900588,20.0004706 L81.6971176,20.0004706 L81.6971176,16.6669412 L66.6653529,16.6669412 L80.7418235,4.46242519 C81.3224118,4.0049396 81.6971176,3.29695418 81.6971176,2.50017657" id="Fill-8"></path>
              </g>
            </g>
          </svg>
        </a>
      </h1>
      <ul class="nav mz-nav ml-5" id="mz-nav">
        <li class="nav-item"><a href="#" class="nav-link py-0" data-t="sj">手机</a></li>
        <li class="nav-item"><a href="#" class="nav-link py-0" data-t="lipro">Lipro</a></li>
        <li class="nav-item"><a href="#" class="nav-link py-0" data-t="sx">声学</a></li>
        <li class="nav-item"><a href="#" class="nav-link py-0" data-t="pj">配件</a></li>
        <li class="nav-item"><a href="#" class="nav-link py-0" data-t="sh">生活</a></li>
        <li class="nav-item"><a href="#" class="nav-link py-0">Flyme</a></li>
        <li class="nav-item"><a href="#" class="nav-link py-0">服务</a></li>
        <li class="nav-item"><a href="#" class="nav-link py-0">专卖店</a></li>
        <li class="nav-item"><a href="#" class="nav-link py-0">社区</a></li>
        <li class="nav-item"><a href="#" class="nav-link py-0">企业服务</a></li>
        <li class="nav-item">
          <a href="#" class="nav-link py-0" data-t="app">APP下载</a>
        </li>
      </ul>
      <div class="mz-search pl-3 d-flex justify-content-between align-items-center">
        <input type="text" placeholder="魅族 18" class="border-0 w-75 d-block">
        <div class="mz-btn w-25 text-center">
          <i class="iconfont icon-sousuo"></i>
        </div>
      </div>
      <div class="mz-login" id="mz-login">
          <img src="../images/geren0.png" alt="login">
          <ul class="mz-login-list text-center">
            <li><a href="#">立即登录</a></li>
            <li><a href="#">立即注册</a></li>
            <li><a href="#">我的订单</a></li>
            <li><a href="#">M码通道</a></li>
          </ul>
      </div>
      <div class="mz-shopcar" id="mz-shopcar">
        <img src="../images/shopcar0.png" alt="shopcar"><span class="bg-danger text-center text-white d-inline-block">0</span>
        <ul class="mz-shopcar-list text-center">
        </ul>
      </div>
    </div>
    <div class="mz-nav-menu">
      <div class="mz-menu h-100" id="mz-menu">
        <ul class="mz-menu-sj card-group text-center d-flex justify-content-center" data-t="sj">
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sj-1.png" alt="sj1" class="card-img-top">
              <p class="mz-info">魅族 18「踏雪」</p>
              <p class="mz-price">￥3999</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sj-2.png" alt="sj1" class="card-img-top">
              <p class="mz-info"> 魅族 18「等风」</p>
              <p class="mz-price">￥3999</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sj-3.png" alt="sj1" class="card-img-top">
              <p class="mz-info">魅族 18「渡海」</p>
              <p class="mz-price">￥3999</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sj-4.png" alt="sj1" class="card-img-top">
              <p class="mz-info">魅族 18 Pro「飞雪流光」</p>
              <p class="mz-price">￥4999</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sj-5.png" alt="sj1" class="card-img-top">
              <p class="mz-info">魅族 18 Pro「苍穹浩瀚」</p>
              <p class="mz-price">￥4999</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sj-6.png" alt="sj1" class="card-img-top">
              <p class="mz-info">魅族 18 Pro「银河秘境」</p>
              <p class="mz-price">￥4999</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sj-7.png" alt="sj1" class="card-img-top">
              <p class="mz-info">魅族 17 Pro</p>
              <p class="mz-price">￥4299</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sj-8.png" alt="sj1" class="card-img-top">
              <p class="mz-info">魅族 17</p>
              <p class="mz-price">￥3699</p>
            </a>
          </li>
        </ul>
        <ul class="mz-menu-lipro card-group text-center d-flex justify-content-center" data-t="lipro">
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-lipro-1.png" alt="sj1" class="card-img-top">
              <p class="mz-info">【新品】Lipro LED 智能吸顶灯</p>
              <p class="mz-price">￥599</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-lipro-2.png" alt="sj1" class="card-img-top">
              <p class="mz-info">【新品】Lipro 智能蓝牙控制器</p>
              <p class="mz-price">￥89</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-lipro-2.png" alt="sj1" class="card-img-top">
              <p class="mz-info">【新品】魅族 Lipro LED 筒灯</p>
              <p class="mz-price">￥199</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-lipro-3.png" alt="sj1" class="card-img-top">
              <p class="mz-info">【无线版】魅族 Lipro LED 橱柜灯</p>
              <p class="mz-price">￥99</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-lipro-4.png" alt="sj1" class="card-img-top">
              <p class="mz-info">魅族 Lipro LED 灯泡</p>
              <p class="mz-price">￥269</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-lipro-5.png" alt="sj1" class="card-img-top">
              <p class="mz-info">魅族 Lipro LED 地脚灯</p>
              <p class="mz-price">49</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-lipro-6.png" alt="sj1" class="card-img-top">
              <p class="mz-info">            魅族 Lipro LED 灯带
              </p>
              <p class="mz-price">￥99</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-lipro-7.png" alt="sj1" class="card-img-top">
              <p class="mz-info">            魅族 Lipro LED 灯带
              </p>
              <p class="mz-price">￥999</p>
            </a>
          </li>
        </ul>
        <ul class="mz-menu-sx card-group text-center d-flex justify-content-center" data-t="sx">
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sx-1.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                【新品】魅族 POP Pro 主动降噪耳机
              </p>
              <p class="mz-price">￥459</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sx-2.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                魅族 POP2s 真无线耳机
              </p>
              <p class="mz-price">￥279</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sx-3.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                魅族 HD60 降噪耳机
              </p>
              <p class="mz-price">￥799</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sx-4.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                魅族 HD60 头戴式蓝牙耳机
              </p>
              <p class="mz-price">￥329</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sx-5.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                魅族 HIFI 解码耳放
              </p>
              <p class="mz-price">￥119</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sx-6.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                魅族 EP3C 耳机
              </p>
              <p class="mz-price">￥99</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sx-7.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                MEIZU UR LIVE 特调版
              </p>
              <p class="mz-price">￥1299</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sx-8.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                MEIZU UR 高端定制耳机  预约
              </p>
              <p class="mz-price">￥200</p>
            </a>
          </li>
        </ul>
        <ul class="mz-menu-pj card-group text-center d-flex justify-content-center" data-t="pj">
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-pj-1.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                【新品】魅族全智能手表
              </p>
              <p class="mz-price">￥1499</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-pj-2.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                【新品】魅族立式无线超充
              </p>
              <p class="mz-price">￥199</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-pj-3.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                魅族 18 系列手机保护膜
              </p>
              <p class="mz-price">￥29</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-pj-4.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                魅族 18 系列 PC 电镀壳
              </p>
              <p class="mz-price">￥39</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-pj-5.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                魅族 18 液态硅胶壳
              </p>
              <p class="mz-price">￥89</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-pj-6.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                魅族 18 Pro 液态硅胶壳
              </p>
              <p class="mz-price">￥89</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-pj-7.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                魅族超充 USB-C 移动电源
              </p>
              <p class="mz-price">￥149</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-pj-8.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                魅族超充 GaN 三口充电器
              </p>
              <p class="mz-price">￥189</p>
            </a>
          </li>
        </ul>
        <ul class="mz-menu-sh card-group text-center d-flex justify-content-center" data-t="sh">
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sh-1.png" alt="sj1" class="card-img-top">
              <p class="mz-info">            【新款】「PANDAER 18」T恤
              </p>
              <p class="mz-price">￥129</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sh-2.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                【新款】「PANDAER 18」T恤
              </p>
              <p class="mz-price">￥129</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sh-3.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                魅族防飞溅声波电动牙刷
              </p>
              <p class="mz-price">￥179</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sh-4.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                魅族声波电动牙刷刷头
              </p>
              <p class="mz-price">￥59</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sh-5.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                PANDAER 「龍」T恤
              </p>
              <p class="mz-price">￥129</p>
            </a>
          </li>
          <li class="card border-0">
            <a href="#" class="card-body p-2">
              <img src="../images/menu-sh-6.png" alt="sj1" class="card-img-top">
              <p class="mz-info">
                魅族 City Walk 双肩包
              </p>
              <p class="mz-price">￥139</p>
            </a>
          </li>
        </ul>
        <div class="container-fluid px-0 mz-app-drop" data-t="app">
          <img src="../images/app.png" alt="" class="d-block">
        </div>
      </div>
    </div>
  </header>
  <!-- 首页banner部分 -->
  <div class="mz-banner">
    <div class="carousel slide" data-ride="carousel" id="banner">
      <!-- 展示图区域 -->
      <div class="carousel-inner h-100 mz-banner-pic">
        <div class="carousel-item active mz-b1">
        </div>
        <div class="carousel-item mz-b2">
        </div>
        <div class="carousel-item mz-b3">
        </div>
        <div class="carousel-item mz-b4">
        </div>
        <div class="carousel-item mz-b5">
        </div>
        <div class="carousel-item mz-b6">
        </div>
        <div class="carousel-item mz-b7">
        </div>
      </div>
      <!-- 左右控制 -->
      <a href="#banner" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a href="#banner" class="carousel-control-next" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
      <!-- 指示符区域 -->
      <ul class="carousel-indicators mz-ind">
        <li class="active" data-target="#banner" data-slide-to="0"></li>
        <li data-target="#banner" data-slide-to="1"></li>
        <li data-target="#banner" data-slide-to="2"></li>
        <li data-target="#banner" data-slide-to="3"></li>
        <li data-target="#banner" data-slide-to="4"></li>
        <li data-target="#banner" data-slide-to="5"></li>
        <li data-target="#banner" data-slide-to="6"></li>
    </ul>
    </div>
  </div>
  <!-- 广告区域 -->
  <section class="mz-adv">
    <div class="container">
      <ul class="d-flex justify-content-around">
        <li><a href="#">
          <img src="../images/adv-1.jpg" alt="adv">
          <h3>魅族 618 心动狂欢节</h3>
          <p>购物抽好礼 惊喜秒杀</p>
        </a></li>
        <li><a href="#">
          <img src="../images/adv-2.jpg" alt="adv">
          <h3>OCEANLOVER</h3>
          <p>保护珍稀中华白海豚</p>
        </a></li>
        <li><a href="#">
          <img src="../images/adv-3.jpg" alt="adv">
          <h3>5G之家</h3>
          <p>电信套餐享大额补贴</p>
        </a></li>
        <li><a href="#">
          <img src="../images/adv-4.jpg" alt="adv">
          <h3>mCycle</h3>
          <p>以旧换新</p>
        </a></li>
      </ul>
    </div>
  </section>

  <script src="../js/banner.js"></script>

</body>

</html>